<html>
<head>
    <title>QuickAdd</title>
    <meta name='gwt:module' content='quickAdd.QuickAdd'>
</head>
<body onload="setup()">
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleInfoButton.js' charset='utf-8'/>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleButton.js' charset='utf-8'/>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleAnimator.js' charset='utf-8'/>
<script language="javascript" src="gwt.js"/>
<script language="javascript">
var growboxInset;
var infoButton, doneButton;
/*
    Resizing is very problematic.  We must resize *before* the transition to back
    for some reason and we must save our own dimensions instead of using the
    current div sizes.
*/
var frontWidth=0, frontHeight=0; // these are set on start
var backWidth=550, backHeight=360; // these must be set to a good initial value

function setup() {
    infoButton = new AppleInfoButton(document.getElementById("infoButton"), document.getElementById("front"), "black", "black", toBack);
    doneButton = new AppleGlassButton(document.getElementById("doneButton"), "Done", toFront);
}

function toBack()
{
    var front = document.getElementById("front");
    var back = document.getElementById("back");

    // Resizing is broken, why must we resize before the transition to back?
    // And why can't we use the current div offset dimensions?
    window.resizeTo( backWidth, backHeight );
    //window.resizeTo( back.offsetWidth, back.offsetHeight );
    //window.widget.resizeAndMoveTo ( window.screenX, window.screenY, back.offsetWidth, back.offsetHeight );


    if (window.widget)
        window.widget.prepareForTransition("ToBack");

    front.style.display="none";
    back.style.display="block";

    if (window.widget)
        setTimeout ('window.widget.performTransition();', 0);
}

function toFront()
{
    var front = document.getElementById("front");
    var back = document.getElementById("back");

    if (window.widget)
        window.widget.prepareForTransition("ToFront");

    back.style.display="none";
    front.style.display="block";

    window.resizeTo( frontWidth, frontHeight );
    //window.resizeTo( front.offsetWidth, front.offsetHeight );
    //window.widget.resizeAndMoveTo ( window.screenX, window.screenY, front.offsetWidth, front.offsetHeight );

    if (window.widget)
        setTimeout ('window.widget.performTransition();', 0);

}

function resizeMouseDown(event)
{
    document.addEventListener("mousemove", resizeMouseMove, true);
    document.addEventListener("mouseup", resizeMouseUp, true);

    growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};

    event.stopPropagation();
    event.preventDefault();
}

function resizeMouseMove(event)
{
    var x = event.x + growboxInset.x;
    var y = event.y + growboxInset.y;
    //if ( x < minX ) x = minX;
    //if ( y < minY ) y = minY;

    document.getElementById("resize").style.top = (y-12);
    window.resizeTo(x,y);
    frontWidth = x;
    frontHeight = y;

    event.stopPropagation();
    event.preventDefault();
}

function resizeMouseUp(event)
{
    document.removeEventListener("mousemove", resizeMouseMove, true);
    document.removeEventListener("mouseup", resizeMouseUp, true);

    event.stopPropagation();
    event.preventDefault();
}

</script>
<div id="topEdge"></div>
<div id="bottomEdge"></div>
<div id="front">
    <div id="infoButton"></div>
	<div id="cells"></div>
    <img alt="resize" id='resize' src='resize.png' onmousedown='resizeMouseDown(event);'/>
</div>
<div id="back">
    <center>
        <div id="config"></div>
        <div id="back_contents">
            <br/>
            GS QuickAdd Dashboard Widget v0.9<br/>
            Pat Niemeyer, 2007
            (<span class="link" onclick="widget.openURL('mailto:pat@pat.net');">pat@pat.net</span>)<br/>
            Visit <span class="link" onclick="widget.openURL('http://code.google.com/p/quickadd/')">the QuickAdd website</span> for more info.<br/>
        </div>
        <p/>
        <div id="doneButton"></div>
    </center>
</div>
</body>
</html>
